<template>
  <div class="concentrate">
    <h1>集中</h1>

    <el-form ref="form" :model="form" label-width="80px" :inline="true" class="demo-form-inline">
      <el-form-item label="公寓名称">
        <el-input v-model="form.flatName" placeholder="公寓名称" />
      </el-form-item>

      <el-form-item label="楼盘名称">
        <el-input v-model="form.premisesId" placeholder="审批人" />
      </el-form-item>
      <el-button type="warning">添加楼盘</el-button><br>
      <el-form-item label="公共配套">

        <el-checkbox v-for="r in publics" :key="r.id" v-model="form.publicFacility" :label="r.id">{{ r.name }}</el-checkbox>

      </el-form-item>

      <el-form-item label="公共区域图片">

        <el-upload
          action="http://localhost/api/sys/wish/upload/pic"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <i class="el-icon-plus" />
        </el-upload>

      </el-form-item><br>

      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      <el-form-item label="付款方式">
        押
        <el-select v-model="form.paymentMortgage" placeholder="请选择">
          <el-option label="0" value="0" />
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />
          <el-option label="3" value="3" />

        </el-select>
        付
        <el-select v-model="form.paymentPay" placeholder="请选择">
          <el-option label="0" value="0" />
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />

        </el-select>

      </el-form-item>
      <el-form-item label="户型">

        <el-select v-model="form.room" placeholder="请选择">
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />
          <el-option label="3" value="3" />
          <el-option label="4" value="4" />
          <el-option label="5" value="5" />
          <el-option label="6" value="6" />
          <el-option label="7" value="7" />
          <el-option label="8" value="8" />
          <el-option label="9" value="9" />
        </el-select>

        室
        <el-select v-model="form.hall" placeholder="请选择">
          <el-option label="0" value="0" />
          <el-option label="1" value="1" />
          <el-option label="2" value="2" />

        </el-select>
        厅
      </el-form-item><br>
      <el-form-item label="公共装修情况">
        <el-select v-model="form.decorate" placeholder="请选择">
          <el-option label="精装" value="1" />
          <el-option label="简装" value="2" />
          <el-option label="未装" value="3" />
        </el-select>
      </el-form-item>

      <el-form-item label="设置管家">
        <el-select v-model="form.manager" placeholder="请选择">
          <el-option
            v-for="item in seng"
            :key="item.userId"
            :label="item.username"
            :value="item.userId"
          />
        </el-select>
      </el-form-item><br>

      <el-form-item label="房源介绍">
        <el-input v-model="form.introduce" type="textarea" />
      </el-form-item><br>
      <el-button type="warning" @click="dialogFormVisible = true">添加房型</el-button><br>
      <el-form-item>
        <div v-for="item in form.houseStyles" :key="item" @click="cli(item)">

          <el-image
            style="width: 100px; height: 100px"
            :src="item.img"
            :fit="fit"
          /><br>
          {{ item.acreage }}<br>

        </div>
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button type="primary" @click="fanhui">返回</el-button>
      </el-form-item>
    </el-form>

    <el-dialog title="添加房型" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form1" label-width="80px" :inline="true" class="demo-form-inline">
        <el-form-item label="房型名称">
          <el-input v-model="form1.acreage" placeholder="房型名称" />
        </el-form-item><br>

        <el-form-item label="面积">
          <el-input v-model="form1.proportion" placeholder="审批人" />平方米
        </el-form-item><br>

        <el-form-item label="朝向">

          <el-select v-model="form1.direction" placeholder="请选择">
            <el-option label="东" value="1" />
            <el-option label="南" value="2" />
            <el-option label="西" value="3" />
            <el-option label="北" value="4" />
          </el-select>

        </el-form-item><br>
        <el-form-item label="房间配套">

          <el-checkbox v-for="c in privates" :key="c.id" v-model="form1.privateFacility" :label="c.id">{{ c.name }}</el-checkbox>

        </el-form-item>

        <el-form-item label="租金">
          <el-input v-model="form1.rental" placeholder="租金（元/月）" />元/月

        </el-form-item><br>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="add1()">确定保存</el-button>
        <el-button type="primary" @click="add2()">继续添加</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
export default {
  data() {
    return {

      data: [],
      form: {
        premisesId: null,
        flatName: null,
        publicFacility: [],

        paymentPay: null,
        paymentMortgage: null,
        decorate: null,
        room: null,
        hall: null,
        manager: null,
        houseStyles: [],
        dialogImageUrl: [],
        introduce: null
      },
      form1: {
        acreage: null,
        privateFacility: [],
        proportion: null,
        direction: null,
        rental: null,
        src: null
      },
      publics: [],
      privates: [],
      seng: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      formLabelWidth: '60px'
    }
  },
  created() {
    this.handleChange()
    this.handleChanges()
    this.guanli()
  },
  methods: {

    cli(item) {
      this.dialogFormVisible = true
      this.form1.acreage = item.acreage
      this.form1.proportion = item.proportion
      this.form1.direction = item.direction
      this.form1.rental = item.rental
      this.form1.privateFacility = item.rental
    },
    onSubmit() {
      this.axios.post('http://localhost/api/house/house-info/add', this.form).then(res => {
        if (res) {
          alert('添加成功')

          this.$router.go(-2)
        }
      })
    },

    handleChange(value) {
      this.axios.get('http://localhost/api/house/premises-info/getGg').then(res => {
        this.publics = res.data
      })
    },
    handleChanges(value) {
      this.axios.get('http://localhost/api/house/premises-info/getFj').then(res => {
        this.privates = res.data
      })
    },
    guanli() {
      this.axios.get('http://localhost/api/house/premises-info/getGj').then((res) => {
        this.seng = res.data
      })
    },
    add1() {
      this.form.houseStyles.push({ acreage: this.form1.acreage, img: this.form1.src, proportion: this.form1.proportion, direction: this.form1.direction, rental: this.form1.rental, privateFacility: this.form1.privateFacility })
      this.dialogFormVisible = false
    },
    add2() {
      this.form.houseStyles.push({ acreage: this.form1.acreage, img: this.form1.src, proportion: this.form1.proportion, direction: this.form1.direction, rental: this.form1.rental, privateFacility: this.form1.privateFacility })
      this.form1.acreage
      this.form1.proportion
      this.form1.direction
      this.form1.rental
      this.form1.privateFacility
    },
    fanhui() {

    },
    handlePictureCardPreview(res) {
      this.form.dialogImageUrl.push(res.obj)
    }

  }
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
